<template>
  <div class="divBox">
    <el-card class="box-card">
<!--      <div slot="header" class="clearfix">-->
<!--        <div class="container">-->
<!--          <el-form inline size="small" @submit.native.prevent>-->
<!--            <el-form-item label="关键词：">-->
<!--              <el-input v-model="listPram.keyword" placeholder="名称" clearable class="selWidth"/>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-button icon="el-icon-search" size="mini" type="primary" @click.native="getList">搜索</el-button>-->
<!--              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--            </el-form-item>-->
<!--&lt;!&ndash;            <el-form-item class="el-form-item-align-right">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-button icon="el-icon-circle-plus" size="mini" type="primary" @click="openEdit(null,null)" v-has-permi="['admin:system:category:save']">添加&ndash;&gt;-->
<!--&lt;!&ndash;              </el-button>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-form-item>&ndash;&gt;-->
<!--          </el-form>-->
<!--        </div>-->
<!--      </div>-->
      <el-table
          ref="treeList"
          v-loading="tableLoading"
          :data="treeList"
          size="mini"
          class="table"
          highlight-current-row
          row-key="id"
          :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="name" label="名称" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.name }} | ID:{{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                style="width:40px;"
                @change="handleStatusChange($event,scope.row.id)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort" min-width="100"/>
        <el-table-column label="操作" min-width="180" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button  icon="el-icon-circle-plus" size="mini" type="text" @click="openEdit(null,scope.row.id)" v-has-permi="['admin:system:category:file:save']">添加子级
            </el-button>
            <el-button icon="el-icon-edit" size="mini" type="text" @click="openEdit(scope.row.id,null)" v-has-permi="['admin:system:category:file:save']">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
        :visible.sync="editDialog.show"
        :title="editDialog.id? '编辑':'新增'"
        destroy-on-close
        :close-on-click-modal="false"
        width="600px">
      <edit
          v-if="editDialog.show"
          :id="editDialog.id"
          :pid="editDialog.pid"
          @hideEditDialog="hideEditDialog"
          ref="editForm"
      />
    </el-dialog>
  </div>
</template>
<script>
import edit from './edit'
import {checkPermi} from "@/utils/permission";
import { getTree, updateStatus } from '@/api/categoryApi'
import { hasChild } from '@/utils/utils'

export default {
  components: {edit},
  data() {
    return {
      listPram: {
        pid:0,
        keyword: '',
      },
      treeList: [],
      editDialog: {
        show: false,
        id: null,
        pid:null
      },
      tableLoading: false,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleStatusChange(status,id){
      const loading=this.$loading({text:'更新中',background:'rgba(255,255,255,.5)'})
      updateStatus(id,status).then(()=>{
        this.$message.success('更新状态成功')
        this.getList()
      }).finally(()=>{
        loading.close()
      })
    },
    checkPermi,
    getList() {
      this.tableLoading = true
      getTree(this.listPram).then(res => {
        this.treeList = hasChild(res,'child');
      }).finally(() => {
      })
      this.tableLoading = false;
    },
    openEdit(id = null,pid=null) {
      this.editDialog.id = id;
      this.editDialog.pid = pid;
      this.editDialog.show = true
    },
    hideEditDialog() {
      this.editDialog.show = false
      this.getList()
    },
    resetQuery() {
      this.listPram.keyword = '';
      this.getList()
    }
  }
}
</script>

